<template>
  <!-- 滚动视图：包裹整个页面，支持垂直滚动 -->
  <scroll-view class="scroll-container" scroll-y>
    <view class="container">
      <!-- 1. 顶部轮播图 -->
      <view class="section">
        <swiper class="swiper" autoplay interval="3000" circular>
          <swiper-item v-for="(img, idx) in swiperImgs" :key="idx">
            <image :src="img" class="swiper-img"></image>
          </swiper-item>
        </swiper>
      </view>

      <!-- 2. 城市介绍 -->
      <view class="section">
        <text class="title">泉州介绍</text>
        <rich-text :nodes="cityIntro"></rich-text>
      </view>

      <!-- 3. 探索进度 -->
      <view class="section">
        <text class="title">探索进度</text>
        <text>当前进度: {{ progress }}%</text>
        <progress :percent="progress" stroke-width="6" activeColor="#409EFF" />
      </view>

      <!-- 4. 城市选择 -->
      <view class="section">
        <text class="title">选择城市</text>
        <picker mode="multiSelector" :range="cityRange" @columnchange="onColumnChange" @change="onCityChange">
          <view class="picker-text">
            当前选择: {{ selectedProvince }}·{{ selectedCity }}·{{ selectedArea }}
          </view>
        </picker>
      </view>

      <!-- 5. 媒体展示-->
      <view class="section">
        <text class="title">泉州宣传</text>
        <video :src="videoUrl" class="video" controls></video>
        <text class="title mt-10">泉州背景音乐</text>
        <view class="audio-wrap">
          <button @click="playAudio">播放</button>
          <text>{{ audioName }}</text>
        </view>
      </view>

      <!-- 6. 偏好设置 -->
      <view class="section">
        <text class="title">偏好设置</text>
        <!-- 出行方式-->
        <text class="sub-title">出行方式</text>
        <radio-group @change="onTravelChange">
          <label class="radio-label" v-for="(item, idx) in travelModes" :key="idx">
            <radio :value="item" :checked="selectedTravel === item" />{{ item }}
          </label>
        </radio-group>

        <!-- 显示推荐景点 -->
        <view class="switch-wrap">
          <text class="sub-title">显示推荐景点:</text>
          <switch :checked="showRecommend" @change="onRecommendChange" />
        </view>

        <!-- 探索半径 -->
        <view class="slider-wrap">
          <text class="sub-title">探索半径: {{ radius }}km</text>
          <slider :value="radius" min="1" max="20" @change="onRadiusChange" />
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      // 1. 轮播图数据
      swiperImgs: [
        "/static/city1.png",
        "/static/city2.jpg",
        "/static/city3.jpg",
		"/static/city4.jpg",
		"/static/city5.jpg"
      ],
      // 2. 城市介绍（rich-text 节点）
      cityIntro: `
        <p>海上丝绸之路起点 - 泉州</p>
        <p>历史文化：泉州是国务院首批公布的24个历史文化名城之一，是古代"海上丝绸之路"起点，宋元时期被誉为"东方第一大港"。</p>
        <p>著名景点：清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。</p>
        <p>特色文化：拥有南音、木偶戏和闽南建筑等丰富的非物质文化遗产。</p>
      `,
      // 3. 探索进度
      progress: 66,
      // 4. 城市选择（三级联动数据）
      cityRange: [
        ["福建省","浙江省","四川省","湖北省"],
        ["泉州市"],
        ["丰泽区", "鲤城区", "洛江区","南安市"]
      ],
      selectedProvince: "福建省",
      selectedCity: "泉州市",
      selectedArea: "南安市",
      // 5. 媒体资源
      videoUrl: "/static/city-video.mp4", 
      audioName: "泉州南音·泉州传统乐团",
      // 6. 偏好设置
      travelModes: ["公交", "自驾", "步行"],
      selectedTravel: "公交",
      showRecommend: true,
      radius: 12
    };
  },
  methods: {
    // 城市选择-列变化（三级联动逻辑）
    onColumnChange(e) {
      const { column, value } = e.detail;
      if (column === 0) {
        this.cityRange[1] = ["泉州市"]; // 示例：选择福建省后，城市固定为泉州
        this.cityRange[2] = ["丰泽区", "鲤城区", "洛江区"];
      }
    },
    // 城市选择-确认选择
    onCityChange(e) {
      const [pIdx, cIdx, aIdx] = e.detail.value;
      this.selectedProvince = this.cityRange[0][pIdx];
      this.selectedCity = this.cityRange[1][cIdx];
      this.selectedArea = this.cityRange[2][aIdx];
    },
    // 出行方式选择
    onTravelChange(e) {
      this.selectedTravel = e.detail.value;
    },
    // 推荐景点开关
    onRecommendChange(e) {
      this.showRecommend = e.detail.value;
    },
    // 探索半径滑块
    onRadiusChange(e) {
      this.radius = e.detail.value;
    },
    // 播放音频
    playAudio() {
      const audio = uni.createInnerAudioContext();
      audio.src = "/static/city-music2.mp3"; 
      audio.play();
    }
  }
};
</script>

<style scoped>
.scroll-container {
  height: 100vh;
  width: 100%;
}
.container {
  padding: 15rpx;
  box-sizing: border-box;
}
.section {
  margin-bottom: 30rpx;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  display: block;
}
/* 轮播图样式 */
.swiper {
  height: 300rpx;
}
.swiper-img {
  width: 100%;
  height: 100%;
}
/* 富文本样式 */
rich-text {
  font-size: 28rpx;
  line-height: 40rpx;
}
/* picker 样式 */
.picker-text {
  font-size: 28rpx;
  padding: 15rpx;
  background: #f5f5f5;
  border-radius: 8rpx;
}
/* video 样式 */
.video {
  width: 100%;
  height: 300rpx;
}
.audio-wrap {
  margin-top: 10rpx;
  display: flex;
  align-items: center;
  gap: 15rpx;
}
/* 偏好设置样式 */
.sub-title {
  font-size: 28rpx;
  margin: 15rpx 0;
  display: block;
}
.radio-label {
  margin-right: 20rpx;
  font-size: 28rpx;
}
.switch-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}
</style>
